var flames = document.querySelector('.flames');
var glow = document.querySelector('.glow')
//2.div的鼠标移动事件，但因为鼠标事件的要求是，鼠标在要操作的元素上。所以，我们用window来做
window.onmousemove = function (evt) {
    //3.得到鼠标的当前坐标
    //evt.client 鼠标在可视区中的坐标
    //evt.clientX  鼠标的X轴坐标
    //evt.cliebtY  鼠标的Y轴坐标
    var x = evt.clientX;
    var y = evt.clientY;
    //5.扩展：设置鼠标在元素的中间
    //如果想要设置鼠标在元素的中间，那么就是div的宽度的一半与高度的一半的交点，就是中心点
    //元素的宽度的属性是div.offsetWidth
    //元素的高度的属性是div.offsetHeight
    //那么我们要考虑的是加还是减。
    //如果是加的话，那么就是鼠标显示在0，0坐标，但实际的坐标却是100，100；就会向下，右
    //减的话，鼠标显示在0，0坐标，实际的坐标在-100，-100，向上，左
    //所以是减
    x_flames = x - flames.offsetWidth / 2;
    y_flames = y - flames.offsetHeight / 2;
    x_glow = x - glow.offsetWidth / 2;
    y_glow = y - glow.offsetHeight / 2 - 150;
    //4.设置div的left，top，因为div是设置了绝对定位，像这种移动的都需要设置定位
    //div的左上角点，就是鼠标的坐标
    flames.style.left = x_flames + 'px';
    flames.style.top = y_flames + 35 + 'px';
    glow.style.left = x_glow + 'px';
    glow.style.top = y_glow + 35 + 'px';
    if (document.getElementById("page2").style.display == "block") {
        $("#light_candle").mouseover(
            function () {
                $("#flame-wrap").css("display", "block")
                $(".star").css("display", "block")
                $("#light_candle").css("display", "none")
                $("#confettis").css("display", "block")
                $("#glow").css("display", "none")
                $("#flames").css("display", "none")
                light_candle()
            }
        )
    }
}



function cake_run() {
    $("#page1").css("display", "none")
    $("#page2").css("display", "block")
    $("#glow").css("display", "grid")
    $("#flames").css("display", "grid")

    const timeline = gsap.timeline({
        duration: 0.3
    });


    timeline.fromTo('.cake-topping', {
        yPercent: -300,
        opacity: 0.5
    },
        {
            yPercent: 0,
            opacity: 1
        });


    timeline.to('.candle-container', {
        opacity: 1
    });


    timeline.to('.flame-wrap', {
        scale: 1,
        ease: "back.out"
    });


    timeline.to('.star', {
        opacity: 0.5,
        stagger: 0.05,
        onComplete: function () {
            gsap.to('.star', {
                scale: 0.25,
                repeat: -1,
                stagger: 0.1,
                yoyo: true,
                yoyoEase: "power1.out"
            });

        }
    });
}

function light_candle() {
    const timeline = gsap.timeline({
        duration: 0.3
    });
    timeline.to('.greeting', {
        scale: 1,
        ease: "back.out"
    });

    timeline.to('.greetingToName', {
        scale: 1,
        ease: "back.out"
    });
}
// document.addEventListener("click", event => {
//     bursty(event.pageX, event.pageY);
// });

// setInterval(() => randomizedConfetti(), 500);

// function bursty(x, y) {
//     const burst = new mojs.Burst({
//         left: 0,
//         top: 0,
//         radius: { 0: 200 },
//         count: 20,
//         degree: 360,
//         children: {
//             fill: { white: "#34E1FF" },
//             duration: 2000
//         }
//     }).

//         tune({
//             x: x,
//             y: y
//         });


//     burst.replay();
// }

// function randomizedConfetti() {
//     let randomX = Math.floor(Math.random() * (document.body.clientWidth - 100) + 0);
//     let randomY = Math.floor(Math.random() * (window.innerHeight - 200) + 0);
//     const burst = new mojs.Burst({
//         left: 0,
//         top: 0,
//         radius: { 0: 200 },
//         count: 20,
//         degree: 360,
//         children: {
//             fill: { white: "#34E1FF" },
//             duration: 2000
//         }
//     }).

//         tune({
//             x: randomX,
//             y: randomY
//         });


//     burst.replay();
// }

// Splitting();


